<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				display: flex;
				height: 300px;
				background-color: bisque;
			}

			.left {
				flex: 1;
				background-color: orange;
				display: flex;
				/* 主轴 y */
				flex-direction: column;

				/* 主轴y 排列方式 */
				justify-content: space-around;

				/* 测轴x 排列方式 */
				align-items: center;
			}

			.left-1 {
				background-color: blue;
				/* flex: 1; */
				width: 90%;
				height: 60px;
			}

			.left-2 {
				background-color: red;
				/* flex: 1; */
				width: 90%;
				height: 60px;
			}

			.left-3 {
				background-color: yellow;
				/* flex: 1; */
				width: 90%;
				height: 60px;
			}

			.left-4 {
				background-color: green;
				/* flex: 1; */
				width: 90%;
				height: 60px;
			}

			.right {
				flex: 3;
				background-color: chocolate;

				/* 弹性盒子 */
				display: flex;
				/* 主轴 y */
				flex-direction: column;

			}

			.right-1 {
				flex: 1;
				/* background-color: red; */
				/* 弹性盒子 */
				display: flex;

				/* 主轴排列方式 */
				justify-content: space-around;

			}

			.right-1 span {
				/* flex: 1; */
				width: 100px;
			}

			.s1 {
				background-color: yellow;
			}

			.s2 {
				background-color: blue;
			}

			.s3 {
				background-color: green;
			}

			.s4 {
				background-color: fuchsia;
			}

			.s5 {
				background-color: firebrick;
			}

			.right-2 {
				flex: 3;
				background-color: blue;
				
				display: flex;
				flex-direction: column;
			}
			
			.right-2 span {
				height: 60px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<div class="left-1">1</div>
				<div class="left-2">2</div>
				<div class="left-3">3</div>
				<div class="left-4">4</div>
			</div>
			<div class="right">
				<div class="right-1">
					<span class="s1">1</span>
					<span class="s2">2</span>
					<span class="s3">3</span>
					<span class="s4">4</span>
					<span class="s5">5</span>
				</div>
				<div class="right-2">
					<span class="s6">1</span>
					<span class="s7">2</span>
					<span class="s8">3</span>
					<span class="s9">4</span>
				</div>
			</div>
		</div>
	</body>
</html>
